<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./lib/gc.spread.sheets.13.0.0.css">
  <link rel="stylesheet" href="../assets/css/style.css">
  <link rel="stylesheet" href="../build/common/base.css">


  <link rel="stylesheet" href="../build/form/form.css">
  <link rel="stylesheet" href="../build/form/page.css">
  <link rel="stylesheet" href="../build/form/preview.css">
  <link rel="stylesheet" href="../assets/js/plugins/icheck/skins/all.css">


  <link rel="stylesheet" href="../../assets/js/common/element/index.css">
  <script type="text/javascript" src="../build/common/base.js"></script>
  <script type="text/javascript" src="../build/common/vueEdit.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    li {
      list-style: none
    }

    img {
      vertical-align: top;
      border: none
    }

    .rev_file {
      width: 53px;
      height: 33px;
      position: relative;
    }

    .btn_rev {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .fun_box {
      display: flex;
      margin: 15px;

    }

    .my_btns {
      margin-left: 15px;
      width: 53px;
      height: 33px;
    }

    .title {
      border-bottom: 1px #ccc dashed;
      text-align: center;
      font-size: 20px;
      padding-bottom: 20px;
      padding-top: 20px;
      margin-bottom: 20px;
    }

    .execl_box {
      margin: 0 auto;
      padding: 20px;
      margin-bottom: 60px;
    }

    .btn_box {
      display: flex;
      margin-bottom: 20px;
    }

    .btn_file_box {
      position: relative;
      margin-right: 5px;
    }

    .file_up {
      position: absolute;
      top: 0;
    }

    #importUrl {
      z-index: 999;
      opacity: 0;
    }

    .my_name {
      max-width: 230px;
      margin-bottom: 20px;
      margin-left: 8px;
      border-radius: 5px;
    }

    .tab_th tbody th {
      text-align: right;
    }

    .my_table thead th {
      white-space: nowrap;
    }

    /* input[type=file] {
      display: none;
    } */
    .uplad_box input[type=file] {
      display: none;
    }

    .no_data {
      width: 100%;
      padding: 8px;
      background-color: #f9f9f9;
      text-align: center;

    }

    #barcon {
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 16px;
    }

    /* #barcon a {
      
    } */
  </style>
</head>

<body>

  <div id="app" style="padding: 30px;">

    <!-- <div>
      <el-upload name="预算单" class="upload-demo" drag action="https://127.0.0.1:18084/project/upload" multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </div> -->
    <div style="width: 50%;">




    </div>
    <div>
      <table style=" margin: 0 auto; margin-bottom: 20px;" id="exampleTable"
        class="tab_th table table-striped table-bordered table_hover text-center mb60">
        <thead>
          <tr>
            <th colspan="3" style="text-align: center;">项目登记信息</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>项目名称:</th>
            <td>{{surbeyObj.project_opportunity_name}}</td>
          </tr>
          <tr>
            <th>跟进人员名称:</th>
            <td>{{surbeyObj.project_manager_user_name}}</td>
          </tr>
          <tr>
            <th>登记日期:</th>
            <td>{{surbeyObj.pre_sale_project_year}}</td>
          </tr>
          <tr>
            <th>项目编号:</th>
            <td>{{surbeyObj.pre_sale_project_num}}</td>
          </tr>
        </tbody>
      </table>

    </div>
    <div style="display: flex;">
      <div style="width: 50%;">
        <div style="width: 100%;">
          <label style="width: 20%; text-align: center;">
            预算单名字:
          </label>
          <input style="width: 60%;" ref="must" class="form-control must" v-model="yusuandanTxt" type="text" name=""
            id="">
        </div>
        <div style="width: 100%; display: flex; align-items: center; margin-top: 30px;margin-bottom: 30px;">
          <label style="width: 20%;text-align: center;">预算单版本号:</label>
          <input value="前期成本V1.0" disabled='disabled' style="width: 60%;" class="form-control" type="text" name=""
            id="">
        </div>
      </div>
      <div style="width: 50%; display: flex; align-items: center; margin-top: 30px;margin-bottom: 30px;">
        <label style="width: 20%;text-align: center;">备注:</label>
        <textarea style="width: 60%;" v-model="bzTxt" type="text" class="form-control ab-valid"></textarea>
      </div>
    </div>


    <div class="uplad_box">
      <el-upload :on-error="err" :before-upload="beforeUpload" name="name" class="upload-demo" :on-progress="progress"
        :action="url" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess"
        :before-remove="beforeRemove" multiple :limit="3" accept=".xls,.xlsx" :on-exceed="handleExceed"
        :file-list="fileList" accept=".xls,.xlsx">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">仅支持xls/xlsx文件上传</div>
      </el-upload>
    </div>
    <div style="overflow: auto;" class="mb60">
      <table style="margin-bottom: 0;" class="my_table table table-striped table-bordered table_hover text-center">
        <thead>
          <tr>
            <!-- <th>项目预算id</th> -->
            <th>任务编号</th>
            <th>任务名称</th>
            <th>报价单价</th>
            <th>保价金额</th>
            <th>备注</th>
            <th>数量</th>
            <th>单位</th>
            <th>人工工时(小时)</th>
            <th>人工费</th>
            <th>材料</th>
            <th>分包</th>
            <th>机具</th>
            <th>其他</th>
            <th>合计(元)</th>
            <th>合同额</th>
            <th>税额</th>
            <th>含税合计</th>
            <th>状态</th>
            <th>子项目</th>
          </tr>
        </thead>
        <tbody id="idData">
          <tr v-for="(item, index) in exList" :key="index">
            <!-- <td>{{item.projectID}}</td> -->
            <td>{{item.taskNumber}}</td>
            <td>{{item.taskName}}</td>
            <td>{{item.offerPrice}}</td>
            <td>{{item.offerMoney}}</td>
            <td>{{item.bz}}</td>
            <td>{{item.number}}</td>
            <td>{{item.dw}}</td>
            <td>{{item.hours}}</td>
            <td>{{item.Cost}}</td>
            <td>{{item.cl}}</td>
            <td>{{item.fb}}</td>
            <td>{{item.tool}}</td>
            <td>{{item.qt}}</td>
            <td>{{item.hj}}</td>
            <td>{{item.hte}}</td>
            <td>{{item.se}}</td>
            <td>{{item.hshj}}</td>
            <td>{{item.status}}</td>
            <td>{{item.zxm}}</td>
          </tr>
        </tbody>

      </table>
      <div v-if="exList.length==0" class="no_data">暂无数据</div>
      <table width="60%" align="right">
        <tr>
          <td>
            <div id="barcon" name="barcon"></div>
          </td>
        </tr>
      </table>
    </div>
    <div style="text-align: center;">
      <span @click="handSub()" class="btn btn-success fa fa-send mb30 mt30">保存</span>
      <span @click="handclos()" class="btn btn-success fa fa-times mb30 mt30">取消</span>
    </div>




  </div>
  <!-- <div>
    <div id="div1"></div>
    <div class="title">
      预算清单导入
    </div>
    <div class="execl_box">
      <div>
        <div class="btn_box">
          <a id="comeRevenue" class="btn btn-primary btn-sm mr5 btn-outline">
            <i class="fa fa-edit mr5"></i>
            导出</a>
          <div class="btn_file_box">
            <input class="file_up" type="file" id="importUrl" placeholder="Export file name" />
            <a id="addRevenue" class="file_up btn btn-primary btn-sm mr5 btn-outline">
              <i class=" fa fa-edit mr5"></i>
              添加预算单</a>
          </div>
          <a id="sub" class="btn btn-primary btn-sm btn-outline">提交</a>
        </div>
        <div>
          <span>请输入导出名字:</span><input class="form-control ab-valid my_name" type="text" id="exportFileName"
            value="这是一个excel.xlsx" />
        </div>
      </div>

      <div id="ss" style="height: 600px;width: 100%;"></div>
    </div>

  </div> -->





  <script src="./lib/FileSaver.js"></script>
  <script src="./lib/gc.spread.sheets.all.13.0.0.min.js"></script>
  <script src="./lib/gc.spread.excelio.13.0.0.min.js"></script>
  <script src="./lib/gc.spread.sheets.migration.13.0.0.min.js"></script>
  <script src="./lib/gc.spread.sheets.resources.zh.13.0.0.min.js"></script>
  <script src="../../assets/js/common/element/index.js"></script>
  <script>
    function goPage(pno, psize) {
      var itable = document.getElementById("idData");
      console.log("wwww", itable)
      var num = itable.rows.length;//表格所有行数(所有记录数)
      console.log(num);
      var totalPage = 0;//总页数
      var pageSize = psize;//每页显示行数
      //总共分几页 
      if (num / pageSize > parseInt(num / pageSize)) {
        totalPage = parseInt(num / pageSize) + 1;
      } else {
        totalPage = parseInt(num / pageSize);
      }
      var currentPage = pno;//当前页数
      var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行  31 
      var endRow = currentPage * pageSize;//结束显示的行   40
      endRow = (endRow > num) ? num : endRow; 40
      console.log(endRow);
      //遍历显示数据实现分页
      for (var i = 1; i < (num + 1); i++) {
        var irow = itable.rows[i - 1];
        if (i >= startRow && i <= endRow) {
          // irow.style.display = "block";
          $(irow).show()
        } else {
          $(irow).hide()
          // irow.style.display = "none";
        }
      }
      var pageEnd = document.getElementById("pageEnd");
      var tempStr = "共" + num + "条记录 分" + totalPage + "页 当前第" + currentPage + "页";
      if (currentPage > 1) {
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPage(" + (1) + "," + psize + ")\">首页</a>";
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页</a>"
      } else {
        tempStr += "首页";
        tempStr += "<上一页";
      }

      if (currentPage < totalPage) {
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页></a>";
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPage(" + (totalPage) + "," + psize + ")\">尾页</a>";
      } else {
        tempStr += "下一页>";
        tempStr += "尾页";
      }

      document.getElementById("barcon").innerHTML = tempStr;

    }
    var vm = new Vue({
      el: "#app",
      data: {
        surbeyObj: "",
        id: "",
        rwid: "",
        fileList: [],
        exList: [],
        loading: Number,
        ids: "",
        bzTxt: "",
        url: "http://127.0.0.1:18084/project/uploadOne/",
        projectbudget: {
          code: "",
          registerTime: "",
          OnlyID: "",
          bz: "",
          projectName: "",
          userName: "",
          BudgetName: ""
        },
        yusuandanTxt: ""
      },
      mounted() {

        this.rwid = location.search.replace("?", "")
        var that = this
        var url = "http://127.0.0.1:18084/project/selectOne/76"
        var post = Vue.baseService.get(url);
        post.then(function (res) {
          console.log(res, "单个项目详细信息")
          that.surbeyObj = res
        }, function (status) {
          if (status == !0) {
            $.Toast.error('加载失败！' + status);
          }
        })
        var url = "http://127.0.0.1:18084/project/createProjectdubget"
        var post = Vue.baseService.get(url);
        post.then(function (res) {
          console.log("ddddd", res)
          that.ids = res
          that.url = that.url + res
          // that.surbeyObj = res
        }, function (status) {
          if (status == !0) {
            $.Toast.error('加载失败！' + status);
          }
        })
      },
      methods: {
        handclos: function () {
          var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
          parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
          parent.layer.close(index);
        },
        //获取焦点
        // test: function () {
        //   $(".must").css("border-color", "#e5e6e7")
        // },
        handSub: function () {
          var that = this
          if (that.yusuandanTxt == "") {
            $.Toast.error('预算单名字不能为空');
            $(".must").css("border-color", "red")
            // this.$refs.must.$el.style.borderColor = "red"
            return
          }
          that.projectbudget.code = that.surbeyObj.pre_sale_project_num
          that.projectbudget.registerTime = that.surbeyObj.pre_sale_project_year
          that.projectbudget.OnlyID = that.surbeyObj.id
          that.projectbudget.bz = that.bzTxt
          that.projectbudget.projectName = that.surbeyObj.project_opportunity_name
          that.projectbudget.userName = that.surbeyObj.project_manager_user_name
          that.projectbudget.BudgetName = that.yusuandanTxt
          console.log("you ma ???", that.projectbudget)
          var url = "http://127.0.0.1:18084/project/sumbit/" + that.ids;
          $.ajax({
            url: url,
            type: "post",
            // dataType: "json",
            traditional: true,
            async: false,
            data: { projectbudget: JSON.stringify(that.projectbudget) },
            success: function (res) {
              // console.log("成功了吗????????", res)
              // $.Toast.success("添加成功")
              $.Dialog.success("保存成功", function () {
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
                parent.layer.close(index);
              });

            }
          })
        },
        err() {
          layer.close(this.loading)
          $.Toast.error('上传失败');
        },
        progress() {
          this.loading = layer.load();

          // console.log("这个啥类型的", loading)
        },
        //成功的回调
        handleSuccess(response, file, fileList) {
          console.log("回调===>>>", response)
          this.exList = response
          layer.close(this.loading)
          this.$nextTick(function () {
            goPage(1, 10);
            //dom已更新
          })
        },
        beforeUpload(file) {
          console.log(file)
          var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
          const extension = testmsg === 'xls'
          const extension2 = testmsg === 'xlsx'
          const isLt2M = file.size / 1024 / 1024 < 10
          if (!extension && !extension2) {
            this.$message({
              message: '上传文件只能是 xls、xlsx格式!',
              type: 'warning'
            });
          }
          if (!isLt2M) {
            this.$message({
              message: '上传文件大小不能超过 10MB!',
              type: 'warning'
            });
          }
          return extension || extension2 && isLt2M
          return extension || extension2
        },

        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${file.name}？`);
        }

      },
      watch: {
        yusuandanTxt: function (newValue) {
          if (newValue != "") {
            $(".must").css("border-color", "#e5e6e7")
          } else {
            $(".must").css("border-color", "red")
          }
        }
      }
    })





    function zh(data)//用户将json数组对象解析成二维数组
    {
      var arr = [];
      for (var i in data) {
        arr[i] = [];
        for (var j in data[i]) {
          arr[i].push(data[i][j]);
        }
      }
      return arr;
    }






    // function getCellsValue(activeSheet) {
    //   var json = [];
    //   var colCount = activeSheet.getColumnCount()
    //   var rowCount = activeSheet.getRowCount();

    //   for (var row = 0; row < rowCount; row++) {
    //     for (var col = 0; col < colCount; col++) {
    //       var cellValue = activeSheet.getValue(row, col);
    //       if (!cellValue) {
    //         cellValue = activeSheet.getText(row, col);
    //       }
    //       let index = row + '.' + col;
    //       json.push({
    //         index: index,
    //         value: cellValue
    //       });
    //     }
    //   }

    //   return json;
    // }
    // $(function () {
    //   window.addEventListener("resize", resizeCanvas, false);
    //   function resizeCanvas() {
    //     w = canvas.width = window.innerWidth;
    //     h = canvas.height = window.innerHeight;
    //   }


    //   $("#importUrl").css("width", $("#addRevenue").outerWidth())
    //   $(".btn_file_box").css("width", $("#addRevenue").outerWidth())
    //   // $(".my_name").css("height", $("#addRevenue").outerHeight())
    // })
    // $(document).ready(function () {
    //   //依赖
    //   $.support.cors = true;
    //   workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    //   excelIO = new GC.Spread.Excel.IO();
    //   sheet = workbook.getActiveSheet();
    //   // sheet.suspendPaint();
    //   var newArr = []
    //   var aarr = []
    //   $("#sub").click(function () {

    //     // var a = getCellsValue(workbook)
    //     // console.log("几个表", workbook.getActiveSheet())
    //     var arr = getCellsValue(workbook.getActiveSheet())
    //     console.log("wwwww", aarr)

    //     // console.log("index===>>第一行", JSON.stringify(arr))
    //     // $.ajax({
    //     //   url: "http://127.0.0.1:18084/project/upload/1",
    //     //   data: { list: JSON.stringify(arr) },
    //     //   type: 'POST',
    //     //   traditional: true,
    //     //   async: false,
    //     //   // contentType: 'application/json',
    //     //   // dataType: 'json',
    //     //   success: function (res) {
    //     //     console.log("resssssssss", res)
    //     //   }
    //     // });


    //     // var jsStr = workbook.toJSON();
    //     // // var json = JSON.stringify(workbook.toJSON());
    //     // console.log("json", jsStr);







    //     // let selObj = sheet.getDataSource()
    //     // console.log("selObj", sheet.getDataSource())
    //     // console.log(sheet.getArray());
    //     // sheet.getValue(7, 7);
    //     // $.ajax({
    //     //   url: __ctx + "/sys/budgetimport/save",
    //     //   data: { "json": json },
    //     //   type: 'POST',
    //     //   // contentType: 'application/json',
    //     //   dataType: 'json',
    //     //   success: function (res) {
    //     //     console.log("res", res)
    //     //   }
    //     // });
    //   })

    //   var fils;

    //   //导入
    //   $("#importUrl").change(function () {
    //     console.log(this.files);
    //     fils = this.files[0];
    //     ImportFile()
    //   });
    //   function ImportFile() {
    //     var excelFile = fils;
    //     excelIO.open(excelFile, function (json) {
    //       var workbookObj = json;
    //       workbook.fromJSON(workbookObj);
    //       console.log("?/", json)
    //     }, function (e) {
    //       console.log(e, "格式错误");
    //     });
    //   }
    //   document.getElementById("addRevenue").onclick = function () {
    //     ImportFile()
    //   };
    //   //导出
    //   $("#comeRevenue").click(function () {
    //     ExportFile()
    //   });
    //   function ExportFile() {
    //     //获取导出文件的名字
    //     var fileName = $("#exportFileName").val();
    //     if (fileName.substr(-5, 5) !== '.xlsx') {
    //       fileName += '.xlsx';
    //     }
    //     var jsStr = workbook.toJSON();
    //     var json = JSON.stringify(workbook.toJSON());
    //     console.log("josn===", jsStr);
    //     excelIO.save(json, function (blob) {
    //       saveAs(blob, fileName);
    //     }, function (e) {
    //       if (e.errorCode === 1) {
    //         alert(e.errorMessage);
    //       }
    //     });
    //   }
    // });
    // function LoadSpread(json) {
    //   jsonData = json;
    //   workbook.fromJSON(json);
    //   workbook.setActiveSheet("Revenues (Sales)");
    // }
  </script>
</body>

</html>